<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>event</title>
	<style type="text/css">
		#div{
			width:100px;
			height: 100px;
			border: 3px solid #443322;
		}
		#btn{
			display: block;
			margin:30px auto;
		}
	</style>
</head>
<body>
	<div id="div">
		<input id="btn" type="button" value="点我有惊喜" /> 
		<input id="text" type="text" />
	</div>	
	<ul id="my-list">
		<li id="vicky">vicky</li>
		<li id="jay">jay</li>
		<li id="hanna">hanna</li>
	</ul>
	<script type="text/javascript" src="../Code/event.js"></script>
	<script type="text/javascript">
		var box = document.getElementById("div");
		var btn = box.firstElementChild;
		var handleBox = function (event) {
			console.log("box-father");
			event.stopImmediatePropagation();
			
		}
		var handleBtn = function (event) {
			console.log("btn-son");
			event.stopPropagation();
		}
		EventUtil.addHandler(box,"click",handleBox);
		EventUtil.addHandler(btn,"click",handleBtn);

		var text = document.getElementById("text");
		EventUtil.addHandler(text,"keydown",function (event) {
			var event = EventUtil.getEvent(event);
			var keys = new Array();
			if (event.shiftKey) {
				keys.push("shift")
			}

			if (event.ctrlKey) {
				keys.push("ctrl");
			}
			console.log(keys);
		}) ;
		EventUtil.addHandler(text,"textInput",function (event) {
			var event = EventUtil.getEvent(event);
			alert(event.data);

		});

		//事件委托
		var myList = document.getElementById("my-list");
		EventUtil.addHandler(myList, "click", function (event) {
			var event = EventUtil.getEvent(event);
			var target = EventUtil.getTarget(event);
			switch (target.id) {
				case "vicky" :
					console.log("hello vicky");
					break;
				case "jay" :
					console.log("hello jay");
					break;
				case "hanna" :
					console.log("hello hanna");
					break;
			}
		})

		
		
	</script>

</body>
</html>